<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AIWOO - AI驱动的WooCommerce智能运营助手</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/4.4.0/chart.min.js"></script>
    
    <style>
        :root {
            --primary-color: #6366f1;
            --secondary-color: #8b5cf6;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
        }
        
        body {
            background-color: #f8fafc;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        
        .navbar {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .card {
            border: none;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .metric-card {
            background: linear-gradient(135deg, #fff, #f8fafc);
            border-left: 4px solid var(--primary-color);
        }
        
        .chart-container {
            position: relative;
            height: 300px;
        }
        
        .btn-ai {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border: none;
            color: white;
        }
        
        .btn-ai:hover {
            background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
            color: white;
        }
        
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255,255,255,.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .sidebar {
            background: white;
            box-shadow: 2px 0 4px rgba(0,0,0,0.1);
            min-height: 100vh;
        }
        
        .nav-link {
            color: #64748b;
            padding: 12px 20px;
            border-radius: 8px;
            margin: 2px 0;
            transition: all 0.2s;
        }
        
        .nav-link:hover, .nav-link.active {
            background-color: #f1f5f9;
            color: var(--primary-color);
        }
        
        .alert-item {
            border-left: 4px solid var(--warning-color);
            background-color: #fef3c7;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container-fluid">
            <a class="navbar-brand fw-bold" href="#">
                <i class="fas fa-robot me-2"></i>AIWOO
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#dashboard">仪表盘</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#products">商品管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#analytics">数据分析</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#ai-tools">AI工具</a>
                    </li>
                </ul>
                <div class="d-flex">
                    <button class="btn btn-outline-light me-2" id="syncBtn">
                        <i class="fas fa-sync-alt me-1"></i>同步数据
                    </button>
                    <div class="dropdown">
                        <button class="btn btn-light dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            <i class="fas fa-user-circle me-1"></i>管理员
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">设置</a></li>
                            <li><a class="dropdown-item" href="#">退出</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container-fluid mt-4">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-3 col-lg-2">
                <div class="sidebar p-3 rounded">
                    <h6 class="text-muted mb-3">快速导航</h6>
                    <nav class="nav flex-column">
                        <a class="nav-link active" href="#overview">
                            <i class="fas fa-chart-pie me-2"></i>总览
                        </a>
                        <a class="nav-link" href="#sales">
                            <i class="fas fa-chart-line me-2"></i>销售趋势
                        </a>
                        <a class="nav-link" href="#inventory">
                            <i class="fas fa-boxes me-2"></i>库存管理
                        </a>
                        <a class="nav-link" href="#reviews">
                            <i class="fas fa-star me-2"></i>评论分析
                        </a>
                        <a class="nav-link" href="#alerts">
                            <i class="fas fa-exclamation-triangle me-2"></i>预警中心
                        </a>
                    </nav>
                </div>
            </div>

            <!-- 主内容区 -->
            <div class="col-md-9 col-lg-10">
                <!-- 关键指标卡片 -->
                <div class="row mb-4">
                    <div class="col-md-3">
                        <div class="card metric-card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h6 class="text-muted">总销售额</h6>
                                        <h3 class="mb-0" id="totalRevenue">¥0</h3>
                                    </div>
                                    <div class="text-primary">
                                        <i class="fas fa-dollar-sign fa-2x"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card metric-card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h6 class="text-muted">订单总数</h6>
                                        <h3 class="mb-0" id="totalOrders">0</h3>
                                    </div>
                                    <div class="text-success">
                                        <i class="fas fa-shopping-cart fa-2x"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card metric-card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h6 class="text-muted">商品数量</h6>
                                        <h3 class="mb-0" id="totalProducts">0</h3>
                                    </div>
                                    <div class="text-info">
                                        <i class="fas fa-box fa-2x"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card metric-card">
                            <div class="card-body">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <h6 class="text-muted">低库存预警</h6>
                                        <h3 class="mb-0 text-warning" id="lowStockAlerts">0</h3>
                                    </div>
                                    <div class="text-warning">
                                        <i class="fas fa-exclamation-triangle fa-2x"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 图表区域 -->
                <div class="row mb-4">
                    <div class="col-lg-8">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-chart-line me-2"></i>销售趋势
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="chart-container">
                                    <canvas id="salesChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-chart-pie me-2"></i>库存状态
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="chart-container">
                                    <canvas id="inventoryChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- AI工具区域 -->
                <div class="row mb-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-robot me-2"></i>AI智能工具
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="text-center p-3 border rounded">
                                            <i class="fas fa-magic fa-3x text-primary mb-3"></i>
                                            <h6>商品描述生成</h6>
                                            <p class="text-muted small">一键生成SEO优化的商品描述</p>
                                            <button class="btn btn-ai btn-sm" onclick="generateDescriptions()">
                                                开始生成
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="text-center p-3 border rounded">
                                            <i class="fas fa-tags fa-3x text-success mb-3"></i>
                                            <h6>智能定价</h6>
                                            <p class="text-muted small">基于市场数据提供定价建议</p>
                                            <button class="btn btn-ai btn-sm" onclick="smartPricing()">
                                                获取建议
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="text-center p-3 border rounded">
                                            <i class="fas fa-comments fa-3x text-info mb-3"></i>
                                            <h6>评论情感分析</h6>
                                            <p class="text-muted small">自动分析客户评论情感</p>
                                            <button class="btn btn-ai btn-sm" onclick="analyzeReviews()">
                                                开始分析
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 预警列表 -->
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">
                                    <i class="fas fa-bell me-2"></i>最新预警
                                </h5>
                            </div>
                            <div class="card-body">
                                <div id="alertsList">
                                    <div class="text-center text-muted py-4">
                                        <i class="fas fa-info-circle fa-2x mb-2"></i>
                                        <p>暂无预警信息</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
    
    <!-- 自定义JS -->
    <script src="/js/dashboard.js"></script>
</body>
</html>
